<template>
  <!-- vue3页面 -->
  <div>
    <a-card>
      <a-row>
        <a-button type="link" :icon="h(ArrowLeftOutlined)"> 返回 </a-button>
      </a-row>
      <a-divider />
      <a-row>
        <a-col :span="3">
          <a-input
            v-model:value="filterRule.nameOrWorkNo"
            placeholder="请输入姓名或者工号"
          />
        </a-col>
        <a-col :span="3">
          <MySelect
            title="请选择届次"
            style="width: 100%"
            :fieldNames="{ label: 'label', value: 'label' }"
            :selectData="forTeachersSelect"
            @change="changeSelect('forTeachers', $event)"
          ></MySelect>
        </a-col>
        <a-col :span="3">
          <MySelect
            title="请选择代表团"
            style="width: 100%"
            :fieldNames="{ label: 'label', value: 'label' }"
            :selectData="forTeachersSelect"
            @change="changeSelect('delegacy', $event)"
          ></MySelect>
        </a-col>
        <a-col :span="3">
          <MySelect
            title="请选择工会"
            style="width: 100%"
            :fieldNames="{ label: 'label', value: 'label' }"
            :selectData="forTeachersSelect"
            @change="changeSelect('union', $event)"
          ></MySelect>
        </a-col>
        <a-col :span="3">
          <MySelect
            title="请选择单位"
            style="width: 100%"
            :fieldNames="{ label: 'label', value: 'label' }"
            :selectData="forTeachersSelect"
            @change="changeSelect('units', $event)"
          ></MySelect>
        </a-col>
        <a-col :span="4">
          <a-radio-group
            v-model:value="filterRule.isInvite"
            button-style="solid"
          >
            <a-radio-button :value="true">已邀请</a-radio-button>
            <a-radio-button :value="false">待邀请</a-radio-button>
            <a-button
              type="primary"
              style="margin-left: 20px"
              :icon="h(SearchOutlined)"
              >搜索</a-button
            >
          </a-radio-group>
        </a-col>
      </a-row>
    </a-card>
  </div>
  <MyTable useNumber :tableData="tableData" :columns="columns" />
</template>

<script setup lang="ts">
import { h, reactive, onMounted, ref } from "vue";
import MySelect from "@/components/CommonDai/SelectSearch.vue";
import MyTable from "@/components/CommonDai/Table.vue";
import { administer } from "@/api/contingent";
import { inviteSecond, getOvertrueConfig } from "@/api/overtrue";
import { Tag, message } from "ant-design-vue";
import { useRoute, useRouter } from "vue-router";
import { ArrowLeftOutlined, SearchOutlined } from "@ant-design/icons-vue";
const route = useRoute();
const router = useRouter();

const filterRule = reactive({
  nameOrWorkNo: "",
  forTeachers: "",
  delegacy: "",
  union: "",
  units: "",
  isInvite: false,
}) as any;
onMounted(() => {
  getTableData();
  getOvertrueConfig(route.meta.menuId as string).then((res: any) => {
    menuData.value = res.data.data[0];
    console.log();
  });
});

const menuData = ref<any>();

/** 表格渲染功能 */ //获取表格数据
const getTableData = () => {
  administer("", 10).then((result: any) => {
    tableData.value = result.list;
  });
};
/** 表格数据存储 */
const tableData = ref<any[]>([]);
/** 表格列配置 */
const columns = ref([
  {
    title: "工号",
    dataIndex: "workNo",
    align: "center",
    isShow: true,
  },
  {
    title: "姓名",
    dataIndex: "name",
    align: "center",
    isShow: true,
  },
  {
    title: "性别",
    dataIndex: "sex",
    align: "center",
    isShow: true,
    customRender: ({ text }: any) => {
      return text === "1" ? "男" : "女";
    },
  },
  {
    title: "所属单位",
    dataIndex: "dept",
    align: "center",
    isShow: true,
  },
  {
    title: "所属工会",
    dataIndex: "union",
    align: "center",
    isShow: true,
  },
  {
    title: "届次",
    dataIndex: "session",
    align: "center",
    isShow: true,
  },
  {
    title: "代表团",
    dataIndex: "deputation",
    align: "center",
    isShow: true,
  },
  {
    title: "附议状态",
    dataIndex: "sex",
    align: "center",
    isShow: true,
    customRender: ({ text }) => {
      return h(
        Tag,
        {
          color: text === "1" ? "blue" : "green",
        },
        () => (text === "1" ? "已邀请" : "待邀请")
      );
    },
  },
  {
    title: "操作",
    dataIndex: "action",
    align: "center",
    isShow: true,
    customRender: ({ record }: any) => {
      return h(
        "a",
        {
          onClick: () => {
            onInviteSecond(record.id);
          },
        },
        "邀请"
      );
    },
  },
]);
/** 点击表格操作列按钮后触发事件 */
const onInviteSecond = (secondId: string) => {
  let code = menuData.value.behindData[0].code;
  let codeName = menuData.value.behindData[0].title;
  let codeColor = menuData.value.behindData[0].color;
  let inviteTime = new Date().getFullYear() + "-" + new Date().getMonth();
  inviteSecond(
    route.query.id as string,
    secondId,
    code,
    codeName,
    codeColor,
    inviteTime
  ).then((res: any) => {
    console.log(res);
    router.push({ path: "/overtureHandle/MyOverture" });
    message.success("邀请附议人成功");
  });
};

/** 全部的select组件的change触发后的事件 */
const changeSelect = (key: keyof typeof filterRule, value: any) => {
  filterRule[key] = value;
};
const forTeachersSelect = [
  {
    value: "forTeachers0",
    label: "第二届第四次",
  },
  {
    value: "forTeachers1",
    label: "第二届第三次",
  },
  {
    value: "forTeachers2",
    label: "第二届第二次",
  },
  {
    value: "forTeachers3",
    label: "第二届第一次",
  },
];
</script>

<style scoped lang="less">
:deep(.ant-col) {
  margin-right: 10px;
}
</style>
